<template>
    <div id="app">
        <div class="space"></div>
        <div class="g-logo">
            <img src="./assets/images/logo.png">
        </div>
        <div class="g-center">
          <router-link to="/" class="btns">
              金融管理
          </router-link>
          <router-link to="/Career" class="btns">
              职场体验
          </router-link>
          <router-link to="/Volunteer" class="btns">
              国际义工
          </router-link>
          <router-link to="/National" class="btns">
              国庆项目
          </router-link>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
import './assets/css/base.css'
export default {
  name: 'app'
}
</script>
<style scoped>
  .space {
    width: 100%;
    height: 60px;
  }
  .g-logo {
    margin-left: 50px;
  }
  .g-center{
    width: 1200px;
    height: 200px;
    text-align: center;
    margin: 50px auto;
    position: relative;
  }
  .btns {
    width: 150px;
      height: 150px;
      position: absolute;
      border-radius: 50%;
      color: #fff;
      font-size: 32px;
      text-align: center;
      line-height: 150px;
      cursor: pointer;
  }
  .btns:nth-child(1) {
    background: #80db22;
      border: 15px solid #e3f4c8;
      left: 20px;
  }
  .btns:nth-child(2) {
    background: #2fb2e0;
      border: 15px solid #d6ecf4;
      left: 340px;
  }
  .btns:nth-child(3) {
    background: #f54a6c;
      border: 15px solid #f4e6e9;
      right: 330px
  }
  .btns:nth-child(4) {
    background: #ff9224;
      border: 15px solid #f4e6e9;
      right: 10px;
  }
  .btns:hover {
    color: #fff;
  }
  .btns:nth-child(1):hover {
      border-color: #badb87;
  }
  .btns:nth-child(2):hover {
      border-color: #73c4e0;
  }
  .btns:nth-child(3):hover {
      border-color: #f47b93;
  }
  .btns:nth-child(4):hover {
    border-color: #FFAF60;
  }
</style>